import React from 'react';
import {Link} from 'react-router';
import {connect} from 'react-redux'
import _ from 'lodash'

import {Table, Icon, Tag, message, Modal, Popover, Button} from 'antd';
import {fetchArgs, FetchURL, fetchData, removeData, changePage} from '../../store/actions';
import FormProduct from '../../components/form-product'

class _Product extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            id: null,
            user: this.props.user,
            title: '',
            modalInitial: '',
            confirmLoading: false,
            ProductLen: 0
        };
        this._changePage = this._changePage.bind(this);
        this.fetchProduct = this.fetchProduct.bind(this);
        this.onSelectChange = this.onSelectChange.bind(this);
        this.reFetch = this.reFetch.bind(this);
        this.Edit = this.Edit.bind(this);
        this.delData = this.delData.bind(this);
    };

    fetchProduct() {
        const _this = this;
        let _args = Object.assign({}, fetchArgs);
        _args.URL = FetchURL.PRODUCT;
        _args.IsAuth = true;
        _args.Succ = function (res) {
            _this.setState({
                data: res.content.list,
                ProductLen: res.content.list.length
            });
        };
        _this.props.dispatch(fetchData(_args));
    };

    componentWillMount() {
        this.fetchProduct();
    };

    static contextType = {
        router: React.PropTypes.object
    };

    _changePage() {
        // this.props.dispatch(changePge(''));
    };

    onSelectChange(selectedRowKeys) {
        this.setState({selectedRowKeys});
    };

    reFetch() {
        this.setState({
            visible: false,
            id: null,
            targetData: null
        });
        this.fetchProduct();
    };

    delData(e) {
        e.preventDefault();
        const _t = e.target.dataset;
        this.setState({id: _t.id});
        const modalOpts = {
            title: '删除数据项',
            content: `要删除 ${_t.name} 吗？`,
            okText: ` 删除 `,
            onOk: this.delOk.bind(this)
        };
        Modal.confirm({...modalOpts})
    };

    delOk() {
        const _this = this;
        let _args = Object.assign({}, fetchArgs);
        _args.Id = this.state.id;
        _args.URL = FetchURL.PRODUCT;
        _args.IsAuth = true;
        _args.Succ = function (res) {
            message.success('删除产品成功', 1, function () {
                _this.reFetch();
                _this.setState({
                    visible: false,
                    id: null,
                    title: '',
                    modalInitial: '',
                    confirmLoading: false
                });
            });
        };
        _this.props.dispatch(removeData(_args));
    };

    addData(e) {
        e.preventDefault();
        this.setState({
            visible: true,
            id: null,
            title: '新建',
            targetData: null
        });
    };

    Edit(e) {
        e.preventDefault();
        const _t = e.target.dataset;
        const targetData = _.filter(this.state.data, {id: _t.id})[0];
        this.setState({
            user: this.props.user,
            id: _t.id,
            visible: true,
            title: '编辑',
            targetData: targetData
        });
    };

    onCancel() {
        this.setState({
            visible: false
        });
    };

    render() {
        const columns = [{
            title: '编码',
            dataIndex: 'code',
            width: 100
        }, {
            title: '名称',
            dataIndex: 'name',
            width: 200
        }, {
            title: '类型',
            dataIndex: 'type',
            width: 100,
            render: (text, record)=> {
                switch (text) {
                    case 'R':
                        return <span>报告(R)</span>;
                    case 'G':
                        return <span>图文交流/报告(G)</span>;
                    case 'V':
                        return <span>音视频交流/报告(V)</span>;
                    default:
                        return <span>未知</span>;
                }
            }
        }, {
            title: '时长(分钟)',
            dataIndex: 'duration',
            width: 100
        }, {
            title: '价格(元)',
            dataIndex: 'price',
            width: 100
        }, {
            title: '状态',
            dataIndex: 'status',
            width: 100,
            className: 'ant-column-status',
            render: (text, record)=> {
                switch (text) {
                    case 1:
                    case '1':
                        return <span style={{color: 'green'}}>启用</span>;
                    case 0:
                    case '0':
                        return <span style={{color: 'red'}}>未启用</span>;
                    default:
                        return <span>未知</span>;
                }
            }
        }, {
            title: '描述',
            dataIndex: 'description',
            width: 200
        }, {
            title: '操作',
            width: 200,
            className: 'ant-column-operation',
            render: (text, record) => {
                let _html =
                    (
                        <a href="#" data-name={`${record.name}`} data-id={`${record.id}`} onClick={this.delData}>删除</a>
                    )
                return (
                    <div>
                        <a href="#" data-id={`${record.id}`} onClick={this.Edit}>编辑</a>
                        {record.type != 'R' ? <span className="ant-divider"></span> : ''}
                        {record.type != 'R' ? _html : ''}
                    </div>
                );
            }
        }];
        const dataLen = this.state.ProductLen;
        const pagination = {
            total: dataLen,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize){
            },
            onChange(current){
            }
        };
        const rowSelection = {};
        return (
            <div id="product">
                <div style={{overflow: 'hidden', padding: '10px 0'}}>
                    <div style={{float: 'left'}}>
                        <Button type="primary" size="large" icon="plus" onClick={this.addData.bind(this)}>新建</Button>
                    </div>
                </div>
                <Table bordered rowSelection={rowSelection} columns={columns} dataSource={this.state.data} pagination={pagination}/>
                <FormProduct
                    user={this.state.user}
                    visible={this.state.visible}
                    title={this.state.title}
                    confirmLoading={this.state.confirmLoading}
                    targetData={this.state.targetData}
                    onCancel={this.onCancel.bind(this)}
                    dispatch={this.props.dispatch}
                    id={this.state.id}
                    reFetch={this.reFetch}
                />
            </div>
        )
    };
}
let Product;
export default Product = connect((state) => {
    const {user} = state.rootReducer;
    return {user}
})(_Product);